<template>
  <div>
    <div class="hotcity">
      <div class="hotcity-title">
        <p>热门城市</p>
      </div>
      <div class="hot-city-name">
        <ul>
          <li  v-for="item of listA" :key="item._id" @click="getCitys(item.city_name)">
            {{item.city_name}}
          </li>
        </ul>
      </div>
    </div>
    <div class="alphabet">
      <div class="alphabet-name">字母排序</div>
      <div class="more-alphabet">
        <ul>
          <li v-for="item of listB" :key="item._id">
            <a :href="`#${item.title}`">{{item.title}}</a>
          </li>
        </ul>
      </div>
    </div>
    <a :id=item.title v-for="(item, index) of listB" :key="item._id">
      <div class="items">
        <div class="letter">
          {{item.title}}
        </div>
        <div class="item-city-name">
          <ul>
            <li v-for="item of listB[index].cities" :key="item._id" @click="getCitys(item.city_name)">
                {{item.city_name}}
            </li>
          </ul>
        </div>
      </div>
    </a>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  name: 'CityItems',
  props: {
    listA: Array,
    listB: Array
  },
  data () {
    return {
      getletter: ''
    }
  },
  methods: {
    getCitys (city) {
      this.changeCity(city)
      this.$router.push('/')
    },
    ...mapMutations(['changeCity'])
  }
}
</script>

<style lang="stylus" scoped>
@import '~styles/varibles.styl'
@import '~styles/mixins.styl'
.hotcity
  width: 100%
  .hotcity-title
    titlestyl()
  .hot-city-name
    background: #fff
    ul
      display: flex
      flex-flow: row wrap
      position: relative
      &:before {
        position: absolute
        content: ''
        top: 0
        left: 33.3%
        width: 33.3%
        height: 100%
        border-left: .02rem solid #ddd
        border-right: .02rem solid #ddd
      }
      li
        width: 33.3%
        height: 1rem
        line-height: 1rem
        font-size: .3rem
        text-align: center
        border-bottom: .02rem solid #ddd
        margin-bottom: -.04rem
        z-index: 0
.alphabet
  position: relative
  width: 100%
  .alphabet-name
    titlestyl()
  .more-alphabet
    padding: .25rem 0
    background: #fff
    ul
      display: flex
      flex-flow: row wrap
      li
        width: 16.6%
        height: 1rem
        line-height: 1rem
        font-size: .3rem
        text-align: center
a
  color: #333
  .items
    width: 100%
    .letter
      position: relative
      titlestyl()
      z-index: 999
    .item-city-name
      top: .88rem
      width: 100%
      background: #fff
      ul
        position: relative
        display: flex
        flex-flow: row wrap
        &:before {
          position: absolute
          content: ''
          top: 0
          left: 25%
          width: 25%
          height: 100%
          border-left: .02rem solid #ddd
          border-right: .02rem solid #ddd
        }
        &:after {
          position: absolute
          content: ''
          top: 0
          right: 25%
          width: 25%
          height: 100%
          border-right: .02rem solid #ddd
        }
        li
          position: relative
          width: 25%
          height: 1rem
          line-height: 1rem
          font-size: .3rem
          text-align: center
          border-bottom: .02rem solid #ddd
          z-index: 10
          margin-bottom: -.04rem
          ellipsis()
</style>
